<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 这里的 form标签中的 action是发送/接收到哪里 ，method是方法-->
    <form action="test1.html" method="get">
        用户名: <input type="text" size="30" name="username"><br>
        密码: <input type="password" name="password"><br>
        <!-- 单选，多选一。这里name必须是相同的在同一个radio中
        这里的id是为了配合 label标签 进行使用，可以使得点击性别也可以进行标记，比如点击 男这个性别也可以进行单选-->
        <!-- 这后面的 value是为了URL中的查询字符串中的 K-V键值对，name为K -->
        性别: <input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
        <input type="radio" name="gender" id="gender2" value="2"><label for="gender2">女</label>
        <input type="radio" name="gender" id="gender3" value="3"><label for="gender3">未知</label><br>
        <!-- checkbox 可以达到复选的效果 -->
        爱好: <input type="checkbox" name="hoddy" id="honday1" value="1"><label for="honday1">篮球</label>
        <input type="checkbox" name="hoddy" id="honday2" value="2"><label for="honday2">足球</label>
        <input type="checkbox" name="hoddy" id="honday3" value="3"><label for="honday3">排球</label>
        <input type="checkbox" name="hoddy" id="honday4" value="4"><label for="honday4">乒乓球</label><br>
        
        <!-- select标签 下拉菜单 -->
        专业: <select >
            <option value="1">计算机科学与技术</option>
            <option value="2">软件工程</option>
            <option value="3">人工智能</option>
            <option value="4">物联网</option>
        </select><br>
        
        <!-- textarea 文本域，这里的空格也会对其进行影响 -->
        个人描述: <textarea rows="10" cols="50"></textarea><br>

        <!-- 普通按钮，下面的这个是不能进行提交的-->
        <!-- <input type="button" value="按钮"> -->

        <!-- 提交按钮，这里的按钮我们需要搭配 form 这个标签进行使用 -->
        <!-- <button>这是一个button提交按钮</button> -->
        <input type="submit" value="提交按钮">
    </form>
</body>
</html>